<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import Home from './HomeView.vue'
import About from './vue/LifeCycleView.vue'
import NotFound from './vue/CacheView.vue'
type Routes = {
  [key: string]: Object
}
const routes: Routes = {
  '/': Home,
  '/about': About
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})
const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
